<template>
  <div style="width: 97%;margin-left: 10px">
    <TableTemplate
        ref="registerTableRef"
        :data-set="dataSet"
        :loading="loading"
        @select-submit="getComments"
        @reset-submit="reset"
        @handleView="handleView"
        @exportExcel="exportExcel"
        @deleteId="deleteId"
        @handle-change="handleChange"
    />
    <DialogTemplate
        v-model="dialogTemplateVisible"
        :title="title"
        :is-to-html="true"
        :initial-data="initialData"
        :width="'800px'"
        :form-items="formItems"
        :operation-name="operationName"
        :is-view="isViewMode"
        ref="dialogTemplateRef"
    />
  </div>
</template>
<script setup>
import {reactive, ref} from "vue";
import {ElMessage} from 'element-plus'
import TableTemplate from "@/pages/account/components/tableTemplate.vue";
import DialogTemplate from "@/pages/account/components/dialogTemplate.vue";
import {deleteComment, exportCommentsExcel, getCommentsList} from "@/pages/outcomes/index.js";
// 刷新loading
const loading = ref(false)
const handleIndex = ref([])
const registerTableRef = ref('')
const title = ref('')
const initialData = ref({})
const dialogTemplateVisible = ref(false)
const dialogTemplateRef = ref('')
const isViewMode = ref(false)
const operationName = ref('')
const formItems = ref([{
  list: [
    {
      label: '项目ID',
      prop: 'projectId',
      type: 'input',
    },
    {
      label: '评论方姓名',
      prop: 'username',
      type: 'input',
    },
    {
      label: '被评论方姓名',
      prop: 'busername',
      type: 'input',
    },
      {
      label: '评论内容',
      prop: 'content',
        type: 'input',
    },
    {
      label: '点赞数',
      prop:'support',
      type: 'input',
    },
    {
      label: '评论时间',
      prop: 'createTime',
      type: 'input',
    },
  ]
}])
let dataSet = reactive({
  queryBox: [
    {
      model: 'projectId',
      type: 'input',
      placeholder: '请输入项目ID'
    },
  ],
  tableList: [
    {prop: 'projectId', label: '项目id', width: '180'},
    {prop: 'username', label: '评论方姓名', width: '180'},
    {prop: 'busername', label: '评论方姓名', width: '180'},
    {prop: 'content', label: '评论内容', width: '180'},
    {prop: 'support', label: '点赞数', width: '180'},
    {prop: 'createTime', label: '评论时间', width: '180'},
  ],
  tnQueryTop: [
    {name: '导出', click: 'exportExcel', type: 'info'},
  ],
  operationBtns: [
    {name: '详情', click: 'handleView', type: 'info'},
    {name: '删除', click: 'deleteId', type: 'danger'},
  ],
  tableData: {
    total: 0,
    rows: []
  }
})
// 查询列表
const getComments = async (data) => {
  loading.value = true
  await getCommentsList(data).then(datas => {
    dataSet.tableData.rows = datas.data.records
    dataSet.tableData.total = datas.data.total
  }).finally(() => {
    loading.value = false
  })

}
// 重置
const reset = (data) => {
  getComments(data)
}
// 选中的数据
const handleChange = (data) => {
  handleIndex.value = data
}

// 删除
const deleteId = async (data) => {
  let datas = await deleteComment([data.id])
  if (datas.code === 0) {
    ElMessage.success("删除成功")
    // getComments({});
  } else {
    ElMessage.error("删除失败")
  }
}
// 批量删除
// const batchDelete = async (data) => {
//   if (handleIndex.value.length < 1){
//     ElMessage.error("请选择要删除的数据！")
//     return;
//   }
//   let ids = handleIndex.value.map(item => item.id)
//   let datas = await deleteComment(ids)
//   if (datas.code === 0) {
//     ElMessage.success("批量删除成功")
//     getComments({});
//   } else {
//     ElMessage.error("批量删除失败")
//   }
// }
// 导出
const exportExcel = () => {
  if (handleIndex.value<1){
    ElMessage.error("请选择要导出的数据！")
    return
  }
  exportCommentsExcel(handleIndex.value);
  ElMessage.success("导出成功")
}

// 查看详情
const handleView = (data) => {
  operationName.value = '详情'
  title.value = '评论详情'
  isViewMode.value = true
  initialData.value = {...data}
  dialogTemplateVisible.value = true
  dialogTemplateRef.value.dialogTemplateVisible = true;
}

onMounted(() => {
  getComments({})
});
</script>
<style>
.search-title {
  background: white;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}


.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style scoped>
.demo-pagination-block {
  margin-top: 10px;
}

.dialog img {
  width: 720px;
  height: 400px;
}

.el-icon .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  text-align: center;
}

.avatar-uploader img {
  width: 50%;
  height: 50%;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
</style>
